<template>
  <div>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="流水id" width="150"> </el-table-column>
      <el-table-column prop="transfer" label="流动金额" width="180">
      </el-table-column>
      <el-table-column prop="charge_mode" label="流动方式" width="180">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.chargeMode == 'OUT'"
            >支出</el-tag
          >
          <el-tag type="success" v-else>收入</el-tag></template
        >
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="175" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="getDetail(scope.row.id)"
            >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="账单详情" :visible.sync="showDetial" width="60%">
      <span>
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              流水号
            </template>
            {{ Detial.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 交易对象 </template>
            {{ Detial.relateName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 流动方式 </template>
            <el-tag type="warning" v-if="Detial.chargeMode == 'OUT'"
              >支出</el-tag
            >
            <el-tag type="success" v-else>收入</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              交易前余额
            </template>
            {{ Detial.surplus }}元
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              交易额度
            </template>
            {{ Detial.transfer }}元
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              交易时间
            </template>
            {{ Detial.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              描述
            </template>
            {{ Detial.description }}
          </el-descriptions-item>
        </el-descriptions>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDetial = false">返 回</el-button>
      </span>
    </el-dialog>
    <div class="block">
      <el-pagination
        @current-change="getList"
        layout="prev, pager, next"
        :page-count="pageCunt"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "wallet",
  data() {
    return {
      tableData: [],
      listLoading: false,
      pageCunt: 1,
      showDetial: false,
      Detial: {},
    };
  },
  created() {
    this.getList(1);
  },
  methods: {
    getList(pageNum) {
      this.listLoading = true;
      this.axios
        .get(
          "api/user/auth/wallet/getWater?pageNum=" + pageNum + "&pageSize=10"
        )
        .then((response) => {
          this.tableData = response.data.value.data;
          if (
            response.data.value.total / 10 >
            Number.parseInt(response.data.value.total / 10)
          ) {
            this.pageCunt = Number.parseInt(response.data.value.total / 10) + 1;
          } else {
            this.pageCunt = Number.parseInt(response.data.value.total / 10);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
      this.listLoading = false;
    },
    getDetail(id) {
      this.showDetial = true;
      this.axios
        .get("api/user/auth/wallet/getWaterDetail?id=" + id)
        .then((response) => {
          console.log(response);
          this.Detial = response.data.value;
        })
        .catch((error) => {});
    },
  },
};
</script>